import React, {useRef, useState} from 'react';
// import { useForm } from 'react-hook-form';

import './input.less';

const fn = ()=>{};

function Input({placeholder='请输入', type='text', value='',length='25',  onChange=fn, onSubmit=fn}) {

  // const { register, handleSubmit } = useForm();
  const ref = useRef(null);
  const [val,SetVal] = useState(value);

  const _onChange = e => {
    const v = e.target.value.trim();
    SetVal(v);
    onChange(v);
  }

  const _onSubmit = e =>{
    e.preventDefault();
    if(val){
      onSubmit(val);
      ref.current.blur();
    }
  }

  const _focus = ()=>{
    // register(ref.current,{ required: true });
    ref.current.focus();
  }



  return (
    <form className='g-w100 g-rel com-input'
          onSubmit={_onSubmit}>
      <input maxLength = {length}
             className='h-search g-abs g-w100 g-box g-t0 g-l0'
             ref={ref} type={type} value={val} placeholder={placeholder}
             onClick={_focus} onChange={_onChange}/>
      <i className='iconfont iconfangdajing g-abs g-c8'></i>
    </form>
  )
}

export default Input;